<template>
  <div class="hot-search-wrapper" v-loading="loading">
    <!-- 头部 -->
    <Header @searchHandler="getSearchRes"></Header>
    <!-- 切换导航标签 -->
    <div class="subnav-tags">
      <div class="tags-container">
        <!-- 分类组件 -->
        <Categories @sendCategoryHandler="getCategoryHandler" :categoryList ="categoryList"></Categories>
        <!-- 品牌组件 -->
        <Brand @sendBrandHandler="getBrandHandler" :brandList ="brandList"></Brand>
        <!-- 来源组件 -->
        <Source @sendSourceHandler="getSourceHandler" :sourceList ="sourceList"></Source>
        <!-- 价格组件 -->
        <Price @sendPrice="getPrice"></Price>
      </div>  
    </div>
    <!-- 排序组件 -->
    <Sort :sortList = "sortList" @sendSortHandler="getSortHandler"></Sort>
    <!-- 图文列表 -->
    <div class="graphic-wrapper">
      <div class="hot-graphic-lists" v-if="lists.length>0">
        <HotSystemList  v-for="(item,index) in lists" :key="item.id" :item="item" :index="index"  @sendJoinCollect="getJoinCollect"></HotSystemList>
      </div>
      <div class="graphic-no-data" v-else>
        <NoData gradient="blue"></NoData>
      </div>
      <!-- 分页组件 -->
      <div class="pagination" v-if="total > 40">
        <el-pagination
          background
          :current-page = "pageNum"
          @current-change="changeCurrentPage"
          :page-sizes="[40,80]"
          @size-change="changeCurrentPageSize"
          :total = "total"
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
        <div class="pageSearch" @click="pageSearch">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
  import Header from '../components/hotSearch/Header'
  import Categories from '../components/hotSearch/Categories'
  import Brand from '../components/hotSearch/Brand'
  import Source from '../components/hotSearch/Source'
  import Price from '../components/hotSearch/Price'
  import Sort from '../components/hotSearch/Sort'
  import NoData from '../components/noData'
  import HotSystemList from '../components/hotSystem/HotSystemList'
  export default {
    async fetch({store}){
      await store.commit('setInterIndex',10)
    },
    layout: 'internalouts',
    components:{
      Header,
      Categories,
      Brand,
      Source,
      Price,
      Sort,
      HotSystemList,
      NoData
    },
    data () {
      return {
        // 分类标签
        categoryList:[],
        //商标标签
        brandList:[],
        //来源标签
        sourceList:[],
        //排序标签 0是综合 3是销量 4是价格 5是最新上线
        sortList:[{id:0,title:"综合"}, {id:5,title:"最新上线"}, {id:3,title:"销量"},],
        //图文列表
        lists:[],
        //第一页
        pageNum:1, 
        //每页的条数
        pageSize:40, 
        //总条数
        total:0,
        //页面加载效果
        loading:false,
        //文本搜索
        keywords:String,
        //品牌
        brand:String,
        //分类
        category:String,
        //来源
        origin:String,
        //排序 0是综合 3是销量 4是价格 5是最新上线
        sortType: 0,
        //页面加载效果 
        loading:false,
        //最小价格
        priceMin:Number,
        //最大价格
        priceMax:Number,
        // 升序还是降序的字段
        isDesc:'desc',
      }
    },
    mounted() {
      // 商品搜索页的列表
      this.HotSearch();
      // 分类
      // this.goodsCateList();
    },
    methods: {
      //这个e就是输入框中输入的内容
      getSearchRes(e){ 
        console.log(e)
        this.keywords = e;
        this.HotSearch();
      },
      // 分类事件
      getCategoryHandler(e){
        console.log('category',e)
        this.category = e;
        this.HotSearch();
      },
      // 品牌事件
      getBrandHandler(e){
        console.log('brand',e)
        this.brand = e;
        this.HotSearch();
      },
      // 来源事件
      getSourceHandler(e){
        console.log('Source',e)
        this.origin = e;
        this.HotSearch();
      },
      //价格事件
      getPrice(e) {
        console.log('getPrice',e)
        this.priceMin = e.startPrice;
        this.priceMax = e.endPrice;
        this.HotSearch();
      },
      // 排序事件
      getSortHandler(e) {
        this.isDesc = e.isDesc;
        this.sortType = e.id;
        console.log('sortType',this.sortType)
        this.HotSearch();
      },
      //改变当前页数
      changeCurrentPage(page){ 
        this.pageNum = page; //赋值给当前页
        this.HotSearch(); //调用商品列表接口
        this.$scrollTo()
      },
      //改变条数
      changeCurrentPageSize(pageSize){ 
        this.pageNum = 1; //重新请求第一页
        this.pageSize = pageSize;  //设置条数
        this.HotSearch(); //调用商品列表接口
        this.$scrollTo()
      },
      //点击确定按钮时候调用分页事件
      pageSearch(){
        // this.changeCurrentPage();
        // this.changeCurrentPageSize();
        this.HotSearch();//调用接口interface
        this.$scrollTo();
      },
      // 点击加入收藏，调用初始化接口
      getJoinCollect() {
        this.HotSearch();
      },
      // 商品搜索页的列表
      HotSearch(){
        this.loading = true;
        let params ={
          //页数
          pageNum:this.pageNum,
          //每页的条数 
          pageSize:this.pageSize,
          //搜索关键字
          keyword:this.keywords,
          //品牌
          brand:this.brand,
          //分类
          category:this.category,
          //来源
          origin:this.origin,
          //最小价格
          priceMin:this.priceMin,
          //最大价格
          priceMax:this.priceMax,
          //排序
          sortType:this.sortType,
          // 升序还是降序
          sortClause:this.isDesc
        }
        this.$axios.$post('HotSearch',params).then(res => {
          this.loading = false;
          if(res.status === 200){
            res.obj.goodsList.list.forEach(item=>{
              let obj = item;
              this.$set(obj,"isFlag",false)
              this.$set(obj,"isJoinCollect",false)
            })
            this.lists = res.obj.goodsList.list;
            // 品牌标签
            res.obj.category.unshift("全部");
            this.categoryList = res.obj.category;
            // 分类标签
            res.obj.brand.unshift("全部");
            this.brandList = res.obj.brand;
            // 来源数据
            res.obj.origin.unshift("全部");
            this.sourceList = res.obj.origin;
            // 总的页数
            this.total = res.obj.goodsList.total;
          }else{
            this.$message.warning(res.msg);
          }
        })
        .catch(error => {
          this.$message.warning('请求失败');
          this.loading = false;
        })
      },
    },
}
</script>

<style scoped>
  .hot-search-wrapper{
    background-color: #151923;
    min-width: 1200px;
    margin-top: 2px;
    border: 1px;
    min-height: 100vh;
  }
  /* 切换导航标签 */
  .subnav-tags{
    width: 1440px;
    background-color: #21232e;
    margin: 20px auto 0 auto;
    /* overflow: hidden;   */
    color:#666666;
  }
  @media screen and (max-width:1440px){
    .subnav-tags{
      width: 1200px;
    }
  }
  .tags-container{
    padding:20px 28px;
  }
   /* 图文列表 */
  .graphic-wrapper{
    width:1440px;
    margin:0 auto;
    overflow:hidden;
  }
  @media screen and (max-width:1440px){
    .graphic-wrapper{
      width:1200px;
    }
  }
  .hot-graphic-lists{
    display:flex;
    flex-wrap:wrap;
    width:1470px;
    padding-bottom:30px;
  }
  @media screen and (max-width:1440px){
    .hot-graphic-lists{
      width:1230px;
    }
  }
  /* 分页样式 */
  .pagination{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:0 0 50px 0;
  }
  .pagination .pageSearch{
    width:60px;
    height:28px;
    line-height:28px;
    text-align:center;
    border-radius:15px;
    background-image:linear-gradient(to right, #0099ff,#0099ff,#05d5fc,#07edfb);
    color:#ffffff;
    font-size:14px;
    cursor:pointer;
    margin-left:10px;
    user-select:none;
    transition:all .2s ease;
  }
  .pagination .pageSearch:hover{
    background-image:linear-gradient(to left, #0099ff,#0099ff,#05d5fc,#07edfb);
  }
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color: none;
    background-image:linear-gradient(to right, #0099ff,#0099ff,#05d5fc,#07edfb);
  }
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover{
    background-image:linear-gradient(to left, #0099ff,#0099ff,#05d5fc,#07edfb);
  }
</style>
